<template>
  <div class="wrapper w-full h-full">
    <canvas id="canvas" />
    <Loading />
    <CheckPlane @handleChecked="handleChecked" />
    <TipBarVue />
  </div>
</template>
<script setup lang="ts">
import Loading from "../components/CheckPlane.vue";
import CheckPlane from "../components/CheckPlane.vue";
import TipBarVue from "../components/TipBar.vue";
import { tick } from "../hooks/keyOperate";
import { Color, Group, Object3D, Scene } from "three";
import { onMounted } from "vue";
import { defaultInitScene } from "../utils/InitScene";
import {enableZoom} from '../hooks/enableZoom'

import { defaultLoaderModel } from "../utils/LoaderModel";
import { checked } from "../utils/type";
import { DefaultSelectOperate } from "../utils/SelectOperate";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer";

const labelRenderer: CSS2DRenderer = new CSS2DRenderer();
let canvas: HTMLCanvasElement | null;
let scene: Scene;
let distance: number = 0;
let sourceMap: { [key: string]: any } = {};
let sceneGroup: Group = new Group();
let animateTaget: Object3D;

function handleChecked(item: string) {
  if (sourceMap[item]) {
    let isChecked: boolean = !checked[item];
    checked[item] = isChecked;
    let obj = sourceMap[item].scene;
    let laber_name = document.querySelectorAll(".laber_name");
    if (isChecked) {
      sceneGroup.add(obj);
      laber_name.forEach((item) => {
        if (item.getAttribute("data-uuid") == obj.uuid) {
          let style = item.getAttribute("style");
          item.setAttribute("style", style + " display:block;");
        }
      });
    } else {
      sceneGroup.remove(obj);
      laber_name.forEach((item) => {
        if (item.getAttribute("data-uuid") == obj.uuid) {
          let style = item.getAttribute("style");
          item.setAttribute("style", style + " display:none;");
        }
      });
    }
  } else {
    loaderModel(item);
  }
}
defaultLoaderModel.addEventListener("loaded", (e) => {
  let { data, url } = e.data;
  checked[url] = true;
  sourceMap[url] = data;
  let object: Object3D = sourceMap[url].scene;
  if (url.includes("房子")) {
    object.traverse((res: any) => {
      if (res.isMesh) {
        if (
          res.name ==
          "initialShadingGrouppolySurface116_polySurface3_lambert17_0"
        ) {
          res.position.z = 0;
          animateTaget = res;
        }
      }
    });
  } else {
    addSpriteLabel(object);
  }
  sceneGroup.add(object);
  scene.add(sceneGroup);
});

function addSpriteLabel(object: Object3D | any, flag = 1) {
  let text = "";
  if (flag == 1) {
    if (Object.keys(object.userData).length > 0) {
      if (object.userData.InfoFileName) {
        text = object.userData.InfoFileName.split("-")[0]; // 目标文字
      } else {
        text = object.userData.ModelTitle.split(".")[0]; // 目标文字
      }
    } else {
      text = object.name; // 目标文字
    }
  } else {
    text = object.name; // 目标文字
  }
  let laberDiv = document.createElement("div"); //创建div容器
  laberDiv.className = "laber_name";
  laberDiv.setAttribute("data-uuid", object.uuid);
  laberDiv.innerHTML = `
            <div class='label_count'>
              <span class='close'>X</span>
                ${text}
            </div>
        `;
  // 给标签设置坐标位置
  laberDiv.setAttribute(
    "data-point",
    JSON.stringify(defaultInitScene.camera.position)
  );
  laberDiv.setAttribute(
    "data-place",
    JSON.stringify(defaultInitScene.controls.target)
  );
  let pointLabel = new CSS2DObject(laberDiv);
  object.add(pointLabel);
}
const loaderModel = function (item: string) {
  defaultLoaderModel.load(item);
};
tick(sceneGroup, distance);
onMounted(() => {
  canvas = document.querySelector("#canvas");
  if (!canvas) return;
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  defaultInitScene.init(canvas);
  scene = defaultInitScene.scene;
  scene.background = new Color("#D6D7D8");
  enableZoom();
  defaultInitScene.controls.addEventListener("change", (e) => {
    distance = defaultInitScene.controls.getDistance();
  });
  window.addEventListener("resize", () => {
    defaultInitScene.resize();
  });

  labelRenderer.setSize(window.innerWidth, window.innerHeight);
  labelRenderer.domElement.style.position = "absolute";
  labelRenderer.domElement.style.top = "0px";
  labelRenderer.domElement.style.pointerEvents = "none";
  labelRenderer.domElement.className = "allLabel";
  document.querySelector(".wrapper")?.appendChild(labelRenderer.domElement);

  let direction = 0;
  defaultInitScene.addEventListener("animate", () => {
    tick(sceneGroup, distance);
    labelRenderer.render(scene, defaultInitScene.camera);
    if (animateTaget) {
      if (animateTaget.position.z >= 28) {
        direction = 1;
      } else if (animateTaget.position.z <= -4) {
        direction = 0;
      }
      if (direction == 0) {
        animateTaget.position.z += 0.1;
      } else if (direction == 1) {
        animateTaget.position.z -= 0.1;
      }
    }
  });
  defaultInitScene.renderer.domElement.addEventListener("mousemove", (e) => {
    DefaultSelectOperate.handleMouse(
      e.clientX,
      e.clientY,
      defaultInitScene.camera,
      defaultInitScene.scene
    );
  });
});
</script>
<style>
.laber_name {
  background: rgb(105, 226, 218);
  color: rgb(159, 20, 20);
  padding: 10px;
}
</style>
